<template>
  <div class='container'>
    <!-- 添加学科的组件 -->
    <el-dialog title="新增学科" :visible.sync="addSubjectdialog" width="30%">
      <!-- 主题内容区域 -->
      <el-form
        :model="formData"
        :rules="rules"
        ref="AddSrulesRef"
        label-width="100px"
      >
        <el-form-item label="学科名称">
          <el-input
            placeholder="请输入学科名称"
            v-model="formData.subjectName"
          ></el-input>
        </el-form-item>
        <!-- 是否显示 -->
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>    
  </div>
</template>

<script>
import { add } from '@/api/hmmm/subjects'
export default {
  props: {
    addSubjectdialog: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      value: true,      
      // 添加学科的表单
      formData: {
        subjectName: '',
        isFrontDisplay: 1 // 前台是否显示，默认是1即显示
      },
      // 添加学科的表单验证规则
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isSubjectNumber() {
      if (this.value) {
        return 1
      } else {
        return 0
      }
    }
  },
  methods: {
    // 点击取消按钮时候重置
    btnCancel() {
      this.$refs.formData.resetFields() //重置表单校验
      this.addSubjectdialog = false
    },
    // 确定按钮
    btnOK() {
      this.$refs.AddSrulesRef.validate(async isOK => {
        if (!isOK) {
          console.log(111)
          return false
        }
        // 表单验证成功后发起添加学科请求
        const { data } = await add({
          subjectName: this.formData.subjectName,
          isFrontDisplay: this.isSubjectNumber
        })
        // console.log(data)
        this.formData = data
        this.$emit('AddSubject')
      })      
    }
  }
}
</script>

<style scoped lang='scss'></style>
